<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table
      :key="tableKey"
      ref="table"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column align="center" label="会员" prop="user.name" />
      <el-table-column label="类型" align="center">
        <template slot-scope="{ row }">
          {{
            row.type == 0
              ? "缴纳"
              : row.type == 1
              ? "扣除"
              : row.type == 2
              ? "闭店提现"
              : row.type == 3
              ? "退货返还"
              : row.type == 4
              ? "支付逾期"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="金额" prop="money" />
      <el-table-column align="center" label="支付方式">
        <template slot-scope="{ row }">
          {{
            row.pay_type == 0
              ? "支付宝"
              : row.pay_type == 1
              ? "微信"
              : row.pay_type == 2
              ? "银行卡"
              : row.pay_type == 3
              ? "微信公众号"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作后余额" align="center" prop="balance_money" />
      <el-table-column align="center" label="时间" prop="created_at" />
    </el-table>

    <!-- 分页 -->
    <div v-if="total > 0" style="text-align: right;">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { getSecuritydeposit } from "@/api/common";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  name: "distributionsDeposit",
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        per_page: 20
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getSecuritydeposit(this.listQuery)
        .then(response => {
          const { data, total } = response.data;
          this.list = data;
          this.total = total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>
